<template>
  <div class="module_container">
    <!-- <h4 class="title">流量统计</h4> -->
    <div class="module_title" flex="main:justify">
      <div class="title_text">重点点位信息</div>
      <!-- <div class="tab" flex>
        <div class="active">今日数据</div>
        <div style="margin-left:-20px">累计数据</div>
      </div> -->
    </div>
    <div class="content" flex>
      <div class="left text_over">
        <div v-for="item in tableList" :key="item.parkCode" :class="{active:item.parkCode=== activeParkCode}" flex="cross:center" @click="activeParkCode = item.parkCode">
          <img v-if="item.parkCode=== activeParkCode" src="@/assets/img_xinyong/module3/icon_active.png">
          <img v-else src="@/assets/img_xinyong/module3/icon.png" alt="">
          <span>{{ item.parkName }}</span>
        </div>
      </div>
      <div class="right">
        <div class="r_top" flex="main:justify cross:center">
          <div>总车位数</div>
          <div style="color: #40ffff; font-weight: bold; font-size: 36px"> {{ totalPlot.totalPlot }} </div>
          <div>空余车位数</div>
          <div style="color: #40ffff; font-weight: bold; font-size: 36px"> {{ totalPlot.leftPlot }} </div>
        </div>
        <div class="r_top" flex="main:justify cross:center">
          <div>当前总车位数</div>
          <div style="color: #40ffff; font-weight: bold; font-size: 36px">{{ activeTable.totalPlot }} </div>
          <div>当前空余车位数</div>
          <div style="color: #40ffff; font-weight: bold; font-size: 36px"> {{ activeTable.leftPlot }} </div>
        </div>
        <div class="margin_top_20 r_bottom">
          <img
            width="100%"
            height="100%"
            src="@/assets/img_xinyong/module3/timg.jpg"
            alt=""
            srcset=""
          >
        </div>
      </div>
      <!-- <div ref="bar" class="bar" />
      <div ref="pie" class="pie" /> -->
    </div>
  </div>
</template>

<script>
// import Charts from '@jiaminghi/charts'
// import { optionBar, optionPie } from './module3_option'
import { parkingCodeOptions } from '@/const'
import { getParkingInfosByParkCodes } from '@/api/credit'
export default {
  data() {
    return {
      parkingArr: [
        '街道南停车场',
        '西兴教堂停车场',
        '古塘路停车场',
        '扇谷场停车场',
        '龙图庙停车场',
        '陈列管停车场',
        '铁岭关停车场',
        '江陵路滨兴路停车场'
      ],
      tableList: [],
      activeParkCode: ''
    }
  },
  computed: {
    activeTable() {
      return this.tableList.find(item => item.parkCode === this.activeParkCode) || {}
    },
    totalPlot() {
      return this.tableList.reduce((prev, curr) => {
        prev.totalPlot += curr.totalPlot
        prev.leftPlot += curr.leftPlot
        return prev
      }, { totalPlot: 0, leftPlot: 0 })
    }
  },
  created() {
    getParkingInfosByParkCodes({ parkCodes: parkingCodeOptions.join() }).then(res => {
      this.tableList = res.data
      this.activeParkCode = '10120010316550402000'
    })
  },
  mounted() {
    // this.$nextTick(() => {
    //   new Charts(this.$refs.bar).setOption(optionBar)
    //   new Charts(this.$refs.pie).setOption(optionPie)
    // })
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.content {
  // margin-top: 30px;
  font-size: 28px;
  padding: 35px 40px;
  .left {
    width: 318px;
    margin-right: 20px;
    & > div {
      background: url('~@/assets/img_xinyong/module3/list_bg.png') no-repeat;
      background-size: 100% 100%;
      // padding: 0 10px;
      color: #7da0cf;
      padding-right: 15px;
      height: 48px;
      margin-bottom: 5px;
      // padding: 6px 10px;
      &.active,
      &:hover {
        // background: url("~@/assets/img_xinyong/module3/list_bg.png") no-repeat;
        cursor: pointer;
        opacity: 0.8;
        color: #fff;
        background-image: linear-gradient(
          270deg,
          rgba(140, 116, 62, 0) 0%,
          rgba(255, 208, 128, 0.69) 74%,
          rgba(156, 130, 80, 0) 100%
        );
      }
    }
  }
  .right {
    flex: 1;
    .r_bottom {
      background: url('~@/assets/img_xinyong/module3/video_bg.png') no-repeat;
      background-size: 100% 100%;
      padding: 30px 10px;
      width: 554px;
      height: 326px;
      overflow: hidden;
      box-sizing: border-box;
    }
  }
}
</style>
